


Among Us Workskin

by Umbry2000



Category: Among Us (Video Game)
Genre: Fanwork Research & Reference Guides
Language: English
Status: Completed
Published: 2020-11-30
Updated: 2020-11-30
Packaged: 2021-03-10 01:15:15
Rating: General Audiences
Warnings: No Archive Warnings Apply
Chapters: 1
Words: 2,416
Publisher: archiveofourown.org
Story URL: https://archiveofourown.org/works/27665272
Author URL: https://archiveofourown.org/users/Umbry2000/pseuds/Umbry2000
Summary: The Among Us Workskin I used in my recent fanfiction.
Kudos: 1





	Among Us Workskin

**Author's Note:**

> This is an explanation of the HTML code. If I tried to explain the CSS my head would probably explode. It's not very optimally coded either so I would rather not... I'm sorry if this is a terrible explanation because it probably is, I'm so bad at explaining things. Feel free to just copy and paste the HTML code I provided! If someone has already made something like this I'm really sorry, I just couldn't find anything when I first searched about 2 months ago.
> 
> Be warned that if you are on mobile, certain elements of this workskin will break and the demonstrations I use will almost certainly look even stranger.

If you've read my recent Tales of Symphonia fanfiction involving an Among Us game, you would have seen the Among Us skin that I made. While it still looks a little amateurish and there are more changes I would like to make, I'm just going to share the code here!

The CSS code can be found [here](https://pastebin.com/hdFFKvUh). Simply copy and paste this CSS code into a new or existing workskin! Feel free to change any class names or properties (if you're adding to an existing workskin it's important to ensure that no two classes use the exact same name, because I've run into this problem before). Do remember to actually select the Workskin for use when creating a new work.

Who Is The Impostor?

Purple Red

Cyan Blue

Pink Lime

Green Blue

Black White

Voting Ends In: 120s

Above is an example of a base template. The HTML code can be found [here](https://pastebin.com/qAdAUw7Z). Basically I create the blue rectangle with <div="voting screen"> that has a grey border to give an illusion of the voting screen. All of the content on the voting screen is inputted within the div class.

The first line of text includes the "Who Is The Impostor?" as well as the chat image. This content is inputted within <p class="topline"> to ensure that the text line and image are formatted in a straight line. I use <span class = "titletext1"> to format the text "Who Is the Impostor?" such that it is properly centred. Remember to close with the </span> after.

All images are formatted with their respective class so that they have the right size and properties. The chat icon is inputted using <img src="https://i.ibb.co/P6mFsMr/Chat-Bubble.png" class="chat" />, so that it has a float right property. If you wish to use the chat image without the red circle, you can! I will link the assets at the end, or you can use whatever image you would like. Just remember to resize the height and width properties within the "chat" class in the CSS code.

So, like this:  
<p class="topline"><span class="titletext1">Who Is The Impostor?</span><img src="https://i.ibb.co/P6mFsMr/Chat-Bubble.png" class="chat" /></p>  
Which would give this:

Who Is The Impostor?

This will look a little strange because the padding is custom made for the votescreen div class (I am aware that this is most likely a terrible method). The font is also not formatted because it is not within <div class="votescreen">

Remember to close the paragraph with </p> after the chat image!

Next, we go into the boxes that include the character icons and names. These are created using <span class = "playerboxleft"> and <span class = "playerboxright">. Any text inputted within the playerbox class is automatically formatted for font color, and playerboxleft and playerboxright are given differing float properties to move them to opposite sides of the voting screen.

The playericons are given the class "playericon" and align="left" to ensure the player name aligns properly to the image. So an example of a playerboxleft with both a player icon and name is:  
<span class="playerboxleft"><img src="https://i.ibb.co/MPP8HM2/Blue-Crewmate-Test.png" class="playericon" align="left" />Blue</span>

Blue  
Once again, note that because this is not within <div class="votescreen">, the size of the box and the font is not formatted like it usually is.

  
  
  
  


To get the box on the right hand side, simply use <span class="playerboxright"> instead. The link to all of the icons in their different colours will be provided at the end, so you can choose any colour in the game.

As people who have played the game may know, whoever reports the body or calls the emergency meeting will have a loudspeaker next to their name. We input this image within the playerbox, giving it the class "report" such that it floats right:  
<img src="https://i.ibb.co/Kwxn2Zd/Speakerphone.png" class="report" />

So, a playerbox with the speakerphone would use this HTML code:  
<span class="playerboxright"><img src="https://i.ibb.co/5xqzXPr/Brown-Crewmate-Test.png" class="playericon" align="left" />Brown<img src="https://i.ibb.co/Kwxn2Zd/Speakerphone.png" class="report" /></span>

Brown  
THE DISCLAIMER AGAIN!

  
  
  
  


Remember to close playerboxleft or playerboxright with </span> after any text or images that you have inputted.

The skip vote button at the bottom is given the "skipvote" class, and is inputted using <img src="https://i.ibb.co/3Mj6WLk/SkipVote.png" class="skipvote" />. The text "voting ends in:" is given the class "votingtime" such that it has the float="right" property, and is inputted using <span class="votingtime">Voting Ends In: 120s</span>

Together, it would be:  
<p><img src="https://i.ibb.co/3Mj6WLk/SkipVote.png" class="skipvote" /><span class="votingtime">Voting Ends In: 120s</span></p>

This would give:  


Voting Ends In: 120s

Once again, the disclaimer that you must be getting tired of! Because this is not included in <div class="votescreen">, it may look a little strange. Feel free to change the voting time to whatever you want!

And that's the end of the basics. Remember to close with </div> after finishing with the voting screen.

Who Is The Impostor?

Purple Red

Cyan Blue

Pink Lime

Green Blue

Black White

Voting Ends In: 120s

Oh no, someone's _dead_! HTML code for this layout can be found [here](https://pastebin.com/6pXmZ9r7). We use the span class deadleft and deadright to change the color of the boxes to the grayed out ones. The dead player icons are different images, but still use the class "playericon" and are inputted the same way.

An example:  
<span class="deadleft"><img src="https://i.ibb.co/Bg3ctPt/PinkDead.png" class="playericon" align="left" />Pink</span>

Pink  
DISclaIMer

  
  
  
  


Now it's time to cover voting.

Voting Results

Purple  
Red

Cyan  
Blue

Pink Lime

Green Blue

Black White

Proceeding In: 3s  
  


And the beans have spoken! HTML code is [here](https://pastebin.com/YvjFwxj7). Now to learn how to do it.

The top line is still formatted using <p class="topline">, but "Voting Results" is formatted using <span class="titletext2">.  
So, like this: <p class="topline"><span class="titletext2">Voting Results</span><img src="https://i.ibb.co/P6mFsMr/Chat-Bubble.png" class="chat" /></p>

Voting Results

The vote icons are given the class "voteicon", and inputted as such: <img src="https://i.ibb.co/CKphw53/Purple-Crewmate-Vote.png" class="voteicon" />

To place a vote in one of the playerboxes, first leave a line after the player's name using <br /> to ensure the vote appears below the name in the playerbox.  
Like this: <span class="playerboxleft"><img src="https://i.ibb.co/fkvCWhB/Cyan-Crewmate-Test.png" class="playericon" align="left" />Cyan<br /><img src="https://i.ibb.co/X56dfSq/Green-Crewmate-Vote.png" class="voteicon" /></span>

Disclaimer  


  
  
  
  


If the vote is going to be placed on the player who also reported the body or called the meeting (oh no _self reporting_ ), simply place <br /> after <img src="https://i.ibb.co/Kwxn2Zd/Speakerphone.png" class="report" />.  
Like this: <span class="playerboxright"><img src="https://i.ibb.co/wzthw0W/White-Crewmate-Test.png" class="playericon" align="left" />White<img src="https://i.ibb.co/Kwxn2Zd/Speakerphone.png" class="report" /><br /><img src="https://i.ibb.co/n7tJRgk/Orange-Crewmate-Vote.png" class="voteicon" /></span>

White (Disclaimer)  


  
  
  
  


Now to cover skip voting. "Skipped Voting" is actually an image, given the class "skippedvoting", and given the property align="left" so that the vote icons will appear in the right place. It is inputted like this: <img src="https://i.ibb.co/859shMc/Skipped-Voting.png" class="skippedvoting" align="left" />

It is then followed by the text "Proceeding In", which is given the class "proceeding" so that the red font colour is used. It is inputted using <span class="proceeding">Proceeding In: 3s</span>

Together, it would be: <img src="https://i.ibb.co/859shMc/Skipped-Voting.png" class="skippedvoting" align="left" /><span class="proceeding">Proceeding In: 3s</span>

Proceeding In: 3s

  
  
  


Disclaimer again! :) Anyway, feel free to change the time.

Now if one of the players decided to skip, 2 times of <br /> is placed after <span class="proceeding">Proceeding In: 3s</span> followed by the embedded image.  
So, like this: <img src="https://i.ibb.co/859shMc/Skipped-Voting.png" class="skippedvoting" align="left" /><span class="proceeding">Proceeding In: 3s</span><br /><br /><img src="https://i.ibb.co/hYFFxFC/Brown-Crewmate-Vote.png" class="voteicon" />

Proceeding In: 3s  


  


If you want the player to have multiple votes, simply embed multiple images one after another. There's no need for any other formatting. And that's the end of everything for the voting screen! Another reminder to close with </div> after finishing with the voting screen.

Now, how do we do this?

Black has voted.  
Blue has voted.  
Cyan has voted.  


We align the text to the center by giving the paragraph the class "aligncenter". The voted image is then inputted with <img src="https://i.ibb.co/brQBvxv/Black-Voted.png" class="voted" />.  
For example: <p class="aligncenter"><img src="https://i.ibb.co/brQBvxv/Black-Voted.png" class="voted" />Black has voted.<br /></p>

Black has voted.  


To make multiple lines, simply start the next one after <br />. </p> should appear at the end of the paragraph.  
For example,  
<p class="aligncenter">  
<img src="https://i.ibb.co/brQBvxv/Black-Voted.png" class="voted" />Black has voted.<br />  
<img src="https://i.ibb.co/QnRyHm6/Blue-Voted.png" class="voted" />Blue has voted.<br />  
<img src="https://i.ibb.co/bBXgG69/Cyan-Voted.png" class="voted" />Cyan has voted.<br />  
</p>  
would give the example seen above.

Finally, to the victory and defeat screens!

Oh god we were defeated  


Sweet, sweet victory  


Maybe you're thinking that the font doesn't really resemble the Among Us victory and defeat screen and just looks like the default AO3 font.

Well, that's because the font VCR OSD Mono isn't installed in your system. If the font is appearing correctly, then congratulations, the font is already installed and you can skip the next part. To install the font, first download the TTF file for VCR OSD Mono from [here](https://fontmeme.com/fonts/vcr-osd-mono-font/). Then, install the font. The method will differ depending on your operating system. Look it up if you're having trouble, there are many helpful tutorials to be found!

Reload the page and the text should now display correctly, and we can simulate the victory and defeat screen.

To get the victory text and center it, use:  
<p class="aligncenter"><span class="victory">Victory</span><br /></p>

And for the defeat text, use:  
<p class="aligncenter"><span class="defeat">Defeat</span><br /></p>

And then we will have:  


Victory

Defeat

Of course, you can always choose not to install VCR OSD Mono and instead choose to use a font that is more widely used. If you do choose to use VCR OSD Mono, do provide the link to the TTF file at the start of your work so that your readers can install it too. Even if they don't, the line of text will still show up, it'll just fall back on a more common font.

Wondering how I did the classic ___ was not the Impostor?

I just copied and pasted the famous YouTube comment directly. You can directly copy and paste the code below:  
<p></p><div align="center"> <p>. 。 • ﾟ 。 .</p> <p> . . 。 。 . </p> <p>. 。 ඞ 。 . • •</p> <p> ﾟ Blue was not An Impostor. 。 .</p> <p> ' 2 Impostors remain 。</p> <p> ﾟ . . , . .</p></div>

. 。 • ﾟ 。 .

. . 。 。 . 

. 。 ඞ 。 . • •

ﾟ Blue was not An Impostor. 。 .

' 2 Impostors remain 。

ﾟ . . , . .

Fun! For wrongly accusing people. You can change any of the text, but be aware this could cause the stars to go out of alignment. Of course they're stars, so I guess it doesn't really matter.

As for the dead body reported and emergency meeting banners, I directly embedded the images, resized them and centered them.  
  
Dead body reported:  
<p class="aligncenter"><img src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/572d2149-3f08-4ebf-bd41-470663731799/de5peqy-e81e70e2-0677-432f-b0af-ee9505299ca6.png/v1/fill/w_1020,h_574,strp/among_us___dead_body_found_template_by_domobfdi_de5peqy-fullview.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3siaGVpZ2h0IjoiPD01NzQiLCJwYXRoIjoiXC9mXC81NzJkMjE0OS0zZjA4LTRlYmYtYmQ0MS00NzA2NjM3MzE3OTlcL2RlNXBlcXktZTgxZTcwZTItMDY3Ny00MzJmLWIwYWYtZWU5NTA1Mjk5Y2E2LnBuZyIsIndpZHRoIjoiPD0xMDIwIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmltYWdlLm9wZXJhdGlvbnMiXX0.BOKSTf_jANBGjda8SmkKSU2-w2lqAo8qJhE82l-5IN0" width="600" height="300" /></p>  
  
Emergency meeting:  
<p class="aligncenter"><img src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/572d2149-3f08-4ebf-bd41-470663731799/de5per8-973151a8-c7a9-4cc9-9ad1-2da60cde72c0.png/v1/fill/w_622,h_350,strp/among_us___emergency_template_by_domobfdi_de5per8-350t.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3siaGVpZ2h0IjoiPD01NzQiLCJwYXRoIjoiXC9mXC81NzJkMjE0OS0zZjA4LTRlYmYtYmQ0MS00NzA2NjM3MzE3OTlcL2RlNXBlcjgtOTczMTUxYTgtYzdhOS00Y2M5LTlhZDEtMmRhNjBjZGU3MmMwLnBuZyIsIndpZHRoIjoiPD0xMDIwIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmltYWdlLm9wZXJhdGlvbnMiXX0.spwqWwfREbT_MSBkOnwVZZHts2NK6xqYyED7Kmz4w4I" width="600" height="300" /></p>

Now, as promised, here are the [assets](https://www.spriters-resource.com/pc_computer/amongus/sheet/139386/). You will notice that the crewmate icons are coloured in a strange way, and that's because the game applies the colours to a base template. If you would like to use the icons that I recoloured, you can refer to [this](https://pastebin.com/R6Jz7jEu). If you choose to use your own images (I don't blame you, I don't think I did the best job of recolouring), you may need to change the height and width in the image classes to prevent stretching. A reminder that AO3 cannot host images on its own, so you will have to upload images on a free hosting site. I personally use [ImgBB](https://imgbb.com/) but you're free to use whatever you want.

A warning to the adventurous: If you choose images from different sources, you will likely have to create many different classes or individually resize your images so stretching doesn't occur. And if you choose to use the new voting screen icons that were just introduced by Inner Sloth (the ones with the attachments), you are insane, but I applaud your insanity.

#  Final Notes and Future Changes

  * This takes inspiration from the [rounded playlist workskin](https://archiveofourown.org/works/4826000) by [La_Temperenza](https://archiveofourown.org/users/La_Temperanza/pseuds/La_Temperanza). Do check out both [La_Temperenza](https://archiveofourown.org/users/La_Temperanza/pseuds/La_Temperanza) and [CodenameCarrot](https://archiveofourown.org/users/CodenameCarrot/pseuds/CodenameCarrot), they have many amazing guides on making use of HTML on AO3.
  * I wanted to make a gradient on the blue part of the votingscreen. This is there in the actual game to show the light reflecting off the screen. However, this reflection effect would apply to the playerboxes as well, which would be difficult to apply. I might come back to it in the future.
  * Possibly make a template for the dead body reported and emergency meeting banners so that the crewmate who actually called it will appear instead of a general image?
  * I am working on making the Among Us Chatscreen but ran into more problems than I thought I would. Now that exams are over, though, I should be able to get back to work on it. Once I'm done I'll post it as a second chapter to this.
  * It doesn't work super well on mobile. The screen will stretch past the phone screen, but otherwise the padding survives pretty intact. I'm not sure I could ever make this fit mobile considering its inherent size.



**Author's Note:**

> If you have any improvements in mind, feel free to sound them out in the comments and I will try my best to reply. Feel free to ask questions too, though I don't think I'm going to be a very great help, I sorta stumbled my way through making this (I haven't used HTML or CSS seriously in 4 years...). Thanks for reading and hope this helps! Go crazy!
> 
> The Tales of Symphonia fanfiction that uses this workskin is [here](https://archiveofourown.org/works/27637229/chapters/67621037#workskin)! It would really make my day if you read it. And credits are always welcome <3
> 
> You can find me on [Twitter](https://mobile.twitter.com/Umbry2000), though there's not much there at the moment apart from Miku plush livetweets. There's no Among Us content there!!!


End file.
